<template>
  <div class="category">
    <div class="header-box">
      <i class="el-icon-s-unfold" @click="handleHidden"></i>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useProjectStoreHook } from "/@/store/modules/project";
const projectHook = useProjectStoreHook();

const handleHidden = () => {
  projectHook.isHiddenSetting();
};
</script>

<style lang="scss" scoped>
.category {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ed;
  margin-right: 5px;

  .header-box {
    padding: 16px 5px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    i {
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
}
</style>
